<template>
    <div class="register-wrapper">
        <div class="form-wrapper">
            <el-form ref="formRef" label-width="70px" :model="tempUser" :rules="rules">
            <el-form-item label="用户名" prop="account">
                <el-input v-model="tempUser.account" ></el-input>
            </el-form-item>
             <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="tempUser.password"></el-input>
            </el-form-item>
             <el-form-item label="昵称" prop="nickname">
                <el-input type="text" v-model="tempUser.nickname"></el-input>
            </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="createUser">创建用户</el-button>
            </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
    export default {
        data(){
            return{
                tempUser:{
                    account:'',
                    password:'',
                    nickname:''
                },
            rules:{
                    account:[
                        {required:true,message:'请输入用户名',trigger:'blur'},
                        {min:3,max:5,message:'长度在3-5之间',trigger:'blur'}
                    ],
                     password:[
                        {required:true,message:'请输入密码',trigger:'blur'},
                        {min:6,max:18,message:'长度在6-18之间',trigger:'blur'}
                    ],
                     nickname:[
                        {required:true,message:'请输入昵称',trigger:'blur'},
                        {min:2,max:12,message:'长度在2-12之间',trigger:'blur'}
                    ]
                }
             }
             },
        methods:{
              createUser(){
                this.$refs.formRef.validate(valid=>{
                    if(valid){
                   axios.post('/user',this.tempUser)
                   this.tempUser={}
                   this.$message({message: '添加成功！',type: 'success',duration:1500});
                    }else{
                        this.$message({message: '添加失败！',type: 'error'});
                    }
                })
            }
        }
        
    }
</script>

<style lang="less" scoped>
.register-wrapper{
    display: flex;
}
</style>
